<!DOCTYPE html>
<html lang="zh-CN">

    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style>
            * {
                margin: 0;
                padding: 0;
            }

            body {
                background-color: #0a2a43;
                min-height: 1500px;
            }

            .section {
                position: relative;
                width: 100%;
                height: 100vh;
                overflow: hidden;
                display: flex;
                justify-content: center;
                align-items: center;
            }

            .section:before {
                content: '';
                position: absolute;
                bottom: 0;
                width: 100%;
                height: 100%;
                background: linear-gradient(to top, #0a2a43, transparent);
                z-index: 10;
            }

            .section img {
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                object-fit: cover;
                pointer-events: none;
            }

            #text {
                position: relative;
                color: #fff;
                font-size: 10em;
                z-index: 1;
            }

            #road {
                z-index: 2;
            }

        </style>
    </head>

    <body>
        <!--    相对定位 re-->
        <div class="section">
            <img id="bg" src="./img/bg.jpg" alt="">
            <img id="moon" src="./img/moon.png" alt="">
            <img id="mountain" src="./img/mountain.png" alt="">
            <img id="road" src="./img/road.png" alt="">
            <h2 id="text">你相信光吗</h2>
        </div>
        <script>
            let bg = document.getElementById('bg');
            let moon = document.getElementById('moon');
            let mountain = document.getElementById('mountain');
            let road = document.getElementById('road');
            let text = document.getElementById('text');

            window.addEventListener('scroll', function () {
                let value = window.scrollY
                console.log(value);
                bg.style.top = value * 0.5 + 'px'
                moon.style.left = -value * 0.5 + 'px'
                mountain.style.top = -value * 0.15 + 'px'
                road.style.top = value * 0.15 + 'px'
                text.style.top = value * 1 + 'px'
            })


        </script>
    </body>

</html>